<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div class="flexCont">
        <img
          src="../../../../public/img/commImg/LOGO_w.png"
          alt=""
          class="logoImg"
          @click="goto"
        />
        <div class="logo-title" @click="goto">
          <p class="title-ZH">数字综合服务平台</p>
          <p class="title-EN"><span>Digital</span>Integrated<span>Service</span></p>
        </div>
        <span class="top-bar__item" v-if="showSearch">
          <top-search></top-search>
        </span>
      </div>
    </div>
    <div class="top-bar__right">
      <el-tooltip
        v-if="showFullScren"
        effect="dark"
        :content="
          isFullScren ? $t('navbar.screenfullF') : $t('navbar.screenfull')
        "
        placement="bottom"
      >
        <div class="top-bar__item pointerDom" @click="handleScreen">
          <i :class="isFullScren ? 'icon-tuichuquanping' : 'icon-quanping'"></i>
          <span class="word">全屏</span>
        </div>
      </el-tooltip>
      <el-tooltip
        v-if="showLock"
        effect="dark"
        :content="$t('navbar.lock')"
        placement="bottom"
      >
        <div class="top-bar__item">
          <top-lock></top-lock>
        </div>
      </el-tooltip>
      <el-tooltip
        effect="dark"
        :content="$t('navbar.notice')"
        placement="bottom"
      >
      </el-tooltip>
      <el-tooltip
        v-if="showTheme"
        effect="dark"
        :content="$t('navbar.theme')"
        placement="bottom"
      >
        <div class="top-bar__item top-bar__item--show">
          <span class="pointerDom">
            <!-- <el-badge is-dot> -->
            <i class="el-icon-setting"></i>
            <!-- </el-badge> -->
            <span class="word" @click="toSystemSet">设置</span>
          </span>
        </div>
      </el-tooltip>
      <img
        class="top-bar__img"
        :src="userInfo.avatar ? userInfo.avatar : defaultImg"
        @click="$router.push({ path: '/info/index' })"
      />
      <span class="word">{{ userInfo.userName }}</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ userInfo.userName }}
          <i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/info/index"
              ><i class="myfont icon-user"></i
              >{{ $t('navbar.userinfo') }}</router-link
            >
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout" divided
            ><i class="myfont icon-icon-out-light" style="font-size: 18px"></i
            >{{ $t('navbar.logOut') }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { resetRouter } from '@/router/router'
import { mapGetters, mapState } from 'vuex'
import { fullscreenToggel, listenfullscreen } from '@/util/util'
import topLock from './top-lock'
import topMenu from './top-menu'
import topSearch from './top-search'
import topTheme from './top-theme'
import topLogs from './top-logs'
import topColor from './top-color'
import topNotice from './top-notice'
import topLang from './top-lang'
import topDeal from './top-deal'
import topDraft from './top-draft'

export default {
  components: {
    topLock,
    topMenu,
    topSearch,
    topTheme,
    topLogs,
    topColor,
    topNotice,
    topLang,
    topDeal,
    topDraft
  },
  name: 'top',
  data () {
    return {
      // defaultImg: require('../../../../public/img/commImg/headerDefault.png')
    }
  },
  filters: {},
  created () {},
  mounted () {
    listenfullscreen(this.setScreen)
    console.log('this.$store.state.pageStyle ', this.$store.state.pageStyle)
  },
  computed: {
    ...mapState({
      showDebug: state => state.common.showDebug,
      showTheme: state => state.common.showTheme,
      showLock: state => state.common.showLock,
      showFullScren: state => state.common.showFullScren,
      showSearch: state => state.common.showSearch,
      showMenu: state => state.common.showMenu,
      showColor: state => state.common.showColor
    }),
    ...mapGetters([
      'userInfo',
      'isFullScren',
      'tagWel',
      'tagList',
      'isCollapse',
      'tag',
      'logsLen',
      'logsFlag',
      'menu',
      'website'
    ])
  },
  methods: {
    validIsOpen (item) {
      if (item[this.isOpenKey] === 2 && isURL(item[this.pathKey])) {
        return true
      }
    },
    goto () {
      this.$store.commit('SET_CURRENT_SIDE', '/wel/index')
      let tag = this.website.fistPage
      this.$router.$avueRouter.group = tag.group
      this.$router.$avueRouter.meta = tag.meta
      this.$router.push({
        path: this.$router.$avueRouter.getPath(
          {
            name: tag.label,
            src: tag.value
          },
          tag.meta
        ),
        query: tag.query
      })
      let list = []
      this.menu.forEach(item => {
        list.push(...item.children)
      })
      this.$store.commit('SET_TAB_LIST', list)
    },
    handleScreen () {
      fullscreenToggel()
    },
    setScreen () {
      this.$store.commit('SET_FULLSCREN')
    },
    logout () {
      this.$confirm(this.$t('logoutTip'), '提示', this.$t('tip'), {
        confirmButtonText: this.$t('submitText'),
        cancelButtonText: this.$t('cancelText'),
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          resetRouter()
          this.$router.push({ path: '/login' })
        })
      })
    },
    noticeShow () {
      this.$parent.noticeShow()
    },
    toSystemSet () {
      this.$parent.systemSetShow()
    },
    toStyleSet () {
      this.$parent.toStyleSet()
    },
    topHideChange () {
      this.$parent.topHideChange()
    }
  }
}
</script>

<style lang="scss">
.pointerDom {
  cursor: pointer;
}
.top-bar__left,
.top-bar__right {
  i {
    color: #fff;
  }

  .el-dropdown {
    color: #fff;
  }
  .word {
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 14px;
    margin-left: 6px;
  }
  .topbarToggleIcon {
    font-size: 12px;
  }
}
</style>
